<template>
    <div class="userCollection">
      <div class="filterHead">
          <div class="title">
              <span>用户管理 | 用户收藏</span>
          </div>
          <div class="filter_input">
              <input type="text" v-model="uName" placeholder="请输入用户名称查找" @keyup.enter="handleEnterKey">
              <button class="filter_button" @click="filterCollection">查找</button>
          </div>
      </div>
      <div v-if="total" class="table_box">
          <div class="table_title">
              <div class="table_title_info">文物号</div>
              <div class="table_title_info">文物名称</div>
              <div class="table_title_info">文物类型</div>
              <div class="table_title_info">文物年代</div>
              <div class="table_title_info">收藏用户名</div>
          </div>
          <div class="table_item" 
              @mouseenter="enterTable(index)" 
              @mouseleave="leaveTable(index)" 
              v-for="(item,index) in currentPageData" 
              :key="index">
          <div class="table" ref="table">
              <div class="table_info">{{ item.rid }}</div>
              <div class="table_info">{{ item.name }}</div>
              <div class="table_info">{{ item.groupType }}</div>
              <div class="table_info">{{ item.decadeType }}</div>
              <div class="table_info">{{ item.username }}</div>
          </div>
          <button class="delButton" ref="delButton" @click="deleteConfirm(item)">删除</button>
        </div>
      </div>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
       v-if="total" >
      </el-pagination>
      <div v-else class="empty">
          暂无文物信息
        </div>
    </div>
  </template>
    
    <script>
  import {findAllCollection,findCollectionByName,deleteCollection} from "@/api/admin"
  import { Message } from 'element-ui';
  export default {
    name: "userCollection",
    data(){
      return {
          collectionList:[],
          pageSize:30, //每页显示条数
          total:0,//总条数
          currentPageData: [], // 当前页显示的数据
          currentPage: 1,// 当前显示的页码，默认为第一页
          uName:""
      }
    },
    mounted(){
      this.init();
    },
    methods:{
      handleEnterKey() {
           this.filterCollection();
        },
      deleteConfirm(item){
              this.$confirm('确认要删除该收藏吗？记录删除后将不可恢复', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                customClass:'set_custom_class',
                closeOnClickModal: false,
                type: 'warning'
              }).then(() => {  
               this.deleteCollection(item);
              }).catch(() => {
                Message.info("已取消")       
              });
      },
      async deleteCollection(item){
        let params={
            id:0,
            rid:item.rid,
            uid:item.uid,
        }
        await deleteCollection(params).then((res)=>{
          if(res.data.code===200){
            Message.success("删除成功！")
            window.location.reload();
          }
        }).catch((error)=>{
        console.log(error)
        })
      },
      enterTable(index){
        this.$refs.table[index].style.transform="translateX(-10px)";
        this.$refs.delButton[index].style.transform="translateX(-10px)";
        this.$refs.delButton[index].style.display="flex"
      },
      leaveTable(index){
        this.$refs.table[index].style.transform="translateX(0px)";
        this.$refs.delButton[index].style.transform="translateX(0px)";
        this.$refs.delButton[index].style.display="none"
      },
      async init(){
          await findAllCollection().then((res)=>{
              if(res.data.code===200){
                  this.collectionList=res.data.data.collectionList
                
              }
          }).catch((error)=>{
              console.log(error)
          })
          this.currentPageData=this.collectionList.slice(0,1*this.pageSize)  
          this.total=this.collectionList.length;
          console.log(`当前页数据`,this.currentPageData);
      },
      handleCurrentChange(val) {
          this.currentPageData=this.collectionList.slice((val-1)*this.pageSize,val*this.pageSize);//把每页的数据传给子组件
          console.log(`当前页: ${val}`);
          console.log(`当前页数据`,this.currentPageData);
      },
      async filterCollection(){
      let params={
        uName:this.uName
      }
      await findCollectionByName(params).then((res)=>{
          if(res.data.code===200){
                  this.collectionList=res.data.data.collectionList
                  this.currentPageData=this.collectionList.slice(0,1*this.pageSize)  
                  this.total=this.collectionList.length;
              }
      }).catch((error)=>{
          console.log(error)
      })
      }
    }
  };
  </script>
    
  <style scoped>
  .userCollection{
  min-height: 100vh;
}
  .table_box{
      margin-top: 0;
      font-family: "STKaiti";
      font-size: 20px;
      box-sizing: border-box;
  }
  .table_box .table_title{
      font-weight: bold;
      display: flex;
      height: 45px;
      background: #666666;
      overflow: hidden;
      border-radius: 5px;
  }
  .table_box .table_title .table_title_info{
      flex:1;
      font-size: 20px;
      color: #fff;
      font-weight: bold;
      line-height:45px ;
      box-sizing: border-box;
      padding:0 15px;
  }
  .table_box .table_title .table_title_info:nth-child(2){
      flex:4;
  }
  .table_box .table_title .table_title_info:nth-child(5) {
      flex: 1;
      text-align: right;
      }
  .table{
      flex:4;
      display: flex;
      background: #fffcfc;
      border-radius: 5px;
      margin-top:10px ;
      transition: all 0.4s;
  }
  .table_info {
      flex: 1;
      font-size: 20px;
      color: #333;
      font-weight: normal;
      padding: 10px 10px;
      box-sizing: border-box;
      line-height: 30px;
  }
  .table_info:nth-child(2) {
      font-size: 20px;
      flex:4;
  }
  .table_info:nth-child(5) {
      flex: 1;
      text-align: right;
  }
  .table_item{
    display: flex;
  }
  button:hover{
  cursor: pointer;
  }
  .delButton{
    vertical-align: middle;
    margin-top: 10px;
    width:120px;
    height:50px;
    border: 1px solid #cbcaca;
    color:#fff;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .delButton{
    margin-left:10px;
    background:rgba(156,10,10,0.9);
    border-right-style: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }
  .filterHead{
      display: flex;
      justify-content: space-between;
      height:50px;
      line-height: 50px;
      color:#666666;
      margin-bottom: 20px;
    }
    .title{
      flex: 3;
      font-size: 18px;
      min-width: 200px;
      padding-left:10px;
    }
    .filter_input{
      flex: 1;
      min-width: 400px;
      flex-wrap: nowrap;
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      color:#757474;
      position: relative;
    }
    .filter_input input{
      width:280px;
      height:35px;
      padding:4px;
      border:1px solid rgba(42,81,77, 0.7);
      border-radius: 5px;
      background: #eae8e8;
      color:#535252;
  
    }
    .filter_button{
      color:#fff;
      width:50px;
      height:36px;
      border-radius: 2px;
      /* border-top-left-radius: 0px;
      border-bottom-left-radius: 0px; */
      background:rgba(42,81,77, 1);
      position:absolute;
      top:5px;
      left:230px;
      border:1px solid #9e9d9d;
    }

    .empty{
height: 500px;
text-align: center;
line-height: 500px;
color:#666666;
font-size:20px;
}
  </style> 
 